{% extends "base.html" %}

{% block content %}

<div id="content-page" class="content-page">
            <div class="container">
               <div class="row">
                  <div class="col-lg-8 row m-0 p-0">

                     <nav aria-label="...">
                              <ul class="pagination justify-content-center">
                                 {% if page <= 1 %}
                                    <li class="page-item disabled">
                                       <a class="page-link" href="/newsfeed/page{{page - 1}}" tabindex="-1" aria-disabled="true">Previous</a>
                                    </li>
                                 {% else %}
                                    <li class="page-item">
                                       <a class="page-link" href="/newsfeed/page{{page - 1}}">Previous</a>
                                    </li>
                                    <li class="page-item"><a class="page-link" href="/newsfeed/page{{page - 1}}">{{page - 1}}</a></li>
                                 {% endif %}
                                 <li class="page-item active" aria-current="page">
                                    <a class="page-link" href="/newsfeed/page{{page}}">{{page}}<span class="sr-only">(current)</span></a>
                                 </li>
                                 <li class="page-item"><a class="page-link" href="/newsfeed/page{{page + 1}}">{{page + 1}}</a></li>
                                 <li class="page-item">
                                    <a class="page-link" href="/newsfeed/page{{page + 1}}">Next</a>
                                 </li>
                              </ul>
                           </nav>

                     {% for release in new_releases %}

                     <div class="col-sm-12">
                        <div class="iq-card iq-card-block iq-card-stretch iq-card-height">
                           <div class="iq-card-body">
                              <div class="user-post-data">
                                 <div class="d-flex flex-wrap">
                                    <div class="media-support-user-img mr-3">
                                       {% set first_artist = spotify.artist(release['artists'][0]['id']) %}
                                       {% set image = '/static/images/white.jpg' %}{% if first_artist['images'] %}{% set image = first_artist['images'][0]['url'] %}{% endif %}
                                       <a href="/music/artist/{{release['artists'][0]['id']}}"><img class="rounded-circle img-fluid" src="{{image}}" alt=""></a>
                                    </div>
                                    <div class="media-support-info mt-2">
                                       <h5 class="mb-0 d-inline-block">
                                          {% for artist in release['artists'] %}
                                            <a href="/music/artist/{{artist['id']}}">{{artist['name']}}</a>
                                            {% if not loop.last %}, {% endif %}
                                          {% endfor %}
                                       </h5>
                                       <p class="mb-0 d-inline-block">New {{release['album_type']}}</p>
                                       <p class="mb-0 text-primary">{{format_date(release['release_date'])}}</p>
                                    </div>

                                    <div class="iq-card-post-toolbar">
                                       <div class="dropdown">
                                          <span class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button">
                                          <i class="ri-more-fill"></i>
                                          </span>
                                          <div class="dropdown-menu m-0 p-0">
                                             <a class="dropdown-item p-3" href="/music/album/{{release['id']}}">
                                                <div class="d-flex align-items-top">
                                                   <div class="icon font-size-20"><i class="ri-album-line"></i></div>
                                                   <div class="data ml-2">
                                                      <h6>Album</h6>
                                                      <p class="mb-0">Go to Album page</p>
                                                   </div>
                                                </div>
                                             </a>
                                             <a class="dropdown-item p-3" href="javascript:UnfollowArtist(`{{spotify.auth_manager.get_access_token()['access_token']}}`, `{{release['artists'][0]['id']}}`)">
                                                <div class="d-flex align-items-top">
                                                   <div class="icon font-size-20"><i class="ri-user-unfollow-line"></i></div>
                                                   <div class="data ml-2">
                                                      <h6>Unfollow</h6>
                                                      <p class="mb-0">Unfollow this artist</p>
                                                   </div>
                                                </div>
                                             </a>
                                          </div>
                                       </div>
                                    </div>

                                 </div>
                              </div>
                              <div class="mt-3">
                                 <p>{% for artist in release['artists'] %}
                                            <a href="/music/artist/{{artist['id']}}">{{artist['name']}}</a>
                                            {% if not loop.last %}, {% endif %}
                                          {% endfor %} - <a href="/music/album/{{release['id']}}">{{release['name']}}</a></p>
                              </div>
                              <div class="user-post text-center">
                                 <a href="/music/album/{{release['id']}}"><img src="{{release['images'][0]['url']}}" alt="post-image" class="img-fluid rounded w-100 mt-3"></a>
                              </div>
                           </div>
                        </div>
                     </div>
                     {% else %}
                     <div class="col-sm-12">
                        <div class="iq-card iq-card-block iq-card-stretch iq-card-height">
                           <div class="iq-card-body">
                              <h1 style="text-align: center;">No today releases for you:(</h1>
                              <h3 style="text-align: center;">Check <a href="/music">Music page</a> to see <a href="/music/new">New Releases</a> and something else</h3>
                           </div>
                        </div>
                     </div>

                     {% endfor %}

                     <nav aria-label="...">
                              <ul class="pagination justify-content-center">
                                 {% if page <= 1 %}
                                    <li class="page-item disabled">
                                       <a class="page-link" href="/newsfeed/page{{page - 1}}" tabindex="-1" aria-disabled="true">Previous</a>
                                    </li>
                                 {% else %}
                                    <li class="page-item">
                                       <a class="page-link" href="/newsfeed/page{{page - 1}}">Previous</a>
                                    </li>
                                    <li class="page-item"><a class="page-link" href="/newsfeed/page{{page - 1}}">{{page - 1}}</a></li>
                                 {% endif %}
                                 <li class="page-item active" aria-current="page">
                                    <a class="page-link" href="/newsfeed/page{{page}}">{{page}}<span class="sr-only">(current)</span></a>
                                 </li>
                                 <li class="page-item"><a class="page-link" href="/newsfeed/page{{page + 1}}">{{page + 1}}</a></li>
                                 <li class="page-item">
                                    <a class="page-link" href="/newsfeed/page{{page + 1}}">Next</a>
                                 </li>
                              </ul>
                           </nav>

                  </div>
                  <div class="col-lg-4">
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">Followed Artists</h4>
                           </div>
                        </div>
                        <div class="iq-card-body">
                           <ul class="media-story m-0 p-0">
                              {% for artist in followed_artists %}
                              <li class="d-flex mb-4 align-items-center">
                                 <img src="{{artist['images'][0]['url']}}" alt="story-img" class="rounded-circle img-fluid">
                                 <div class="stories-data ml-3">
                                    <h5><a href="/music/artist/{{artist['id']}}">{{artist['name']}}</a></h5>
                                    <p class="mb-0">{{artist['followers']['total']}} Followers</p>
                                 </div>
                              </li>
                              {% endfor %}
                           </ul>
                           <a href="/music/artist/followed" class="btn btn-primary d-block mt-3">See All</a>
                        </div>
                     </div>
                  </div>
                  <div class="col-sm-12 text-center">
                     <img src="images/page-img/page-load-loader.gif" alt="loader" style="height: 100px;">
                  </div>
               </div>
            </div>
         </div>
      </div>

{% endblock %}